
import { Bar, BarConfig } from '@ant-design/charts';
import { Tprops, TStyle } from './types';
import WarpDiv from './warp';
import { echartStyle, titleStyle } from './config';

const DemoBar = (props: Tprops) => {
  console.log(props.data.sort((a, b) => a.value - b.value));
  const config: BarConfig = {
    data: props.data.sort((a, b) => b.value - a.value),
    xField: 'labelName',
    yField: 'value',
    // paddingRight: 80,
    autoFit: true,
    title: {
      title: props.title,
      ...titleStyle
    },
    style: {
      // maxWidth: 25,
      ...echartStyle
    },
    // markBackground: {
    //   label: {
    //     text: ({ originData }) => {
    //       return `${(originData.value / 1000) * 100}% | ${originData.value}`;
    //     },
    //     position: 'right',
    //     dx: 80,
    //     style: {
    //       fill: '#aaa',
    //       fillOpacity: 1,
    //       fontSize: 14,
    //     },
    //   },
    //   style: {
    //     fill: '#eee',
    //   },
    // },
    scale: {
      y: {
        // domain: [0, 1000],
      },
    },
    axis: {
      x: {
        // tick: false,
        // title: false,

      },
      y: {
        labelFormatter: (val) => `${val}度`,
        // grid: false,
        // tick: false,
        // label: false,
        // title: false,
      },
    },
    interaction: {
      elementHighlight: false,
    },
    tooltip: {
      title: (v: any) => (`${v.labelName}`),
      items: [{ channel: 'y', name: '算力', valueFormatter: (v) => v  }],
    },
  };
  return <WarpDiv>
    <Bar autoFit  {...config} />
  </WarpDiv>
};

export default DemoBar;